<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音标学习助手</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 在index.html的<body>内添加跳转按钮 -->
    <button class="quick-access-btn" onclick="window.location.href='quick.html'">
        快速发音练习
      </button>
      
    <div id="app">
        <!-- 上方音标选择区 -->
        <div class="selector-area">
            <!-- 分类导航 -->
            <div class="scroll-indicator">
                <div v-for="(category, index) in categories" 
                     class="dot" 
                     :class="{ active: activeCategory === category }"></div>
              </div>
            <div class="category-nav">
                <div v-for="category in categories" 
                     class="category-tab"
                     :class="{ active: activeCategory === category }"
                     @click="toggleCategory(category)">
                    {{ category.name }}
                </div>
            </div>
            
            <!-- 音标横向列表 -->
            <div class="symbols-scroll" ref="symbolScroll">
                <div v-for="category in categories" 
                     class="symbol-group"
                     :class="{ active: activeCategory === category }">
                    <div v-for="symbol in category.symbols"
                         class="symbol-item"
                         @click="selectSymbol(symbol)"
                         :class="{ active: selectedSymbol?.id === symbol.id }">
                        {{ symbol.symbol }}
                    </div>
                </div>
            </div>
        </div>

        <!-- 下方内容区 -->
        <div class="content-area">
            <div v-if="selectedSymbol" class="symbol-detail">
                <!-- 发音按钮 -->
                <button class="speak-btn" @click="playAudio">
                    🔊 发音 /{{ selectedSymbol.symbol }}/
                </button>
                <audio ref="audioPlayer" :src="selectedSymbol.audio"></audio>

                <!-- 示例单词 -->
                <div class="examples">
                    <h4>示例单词</h4>
                    <div class="word-list">
                        <div v-for="word in selectedSymbol.examples" 
                             class="word-item">
                            <div class="word-text">{{ word.text }}
                                <a class="transcription">[{{ word.transcription }}]</a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- GIF演示 -->
                <img class="gif-demo" :src="selectedSymbol.gif" alt="发音演示">
            </div>
            
            <div v-else class="placeholder">
                请在上方选择音标
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="data.js"></script>
    <script src="script.js"></script>
</body>
</html>